<template>
	<view class="container">
			<view class="menu">
				<uni-list>
					<uni-list-item title="头像" @click="choosepic" link>
										<template v-slot:footer>
											<image class="slot-image" :src="pic"></image>
										</template>
					</uni-list-item>					
					<uni-list-item title="名称" :rightText="name" @click="changeName" link/>
					<uni-list-item title="邮箱" :rightText="email" @click="changeEmail" link/>
					<uni-list-item showArrow title="修改密码" @click="changePassword" link/>
				</uni-list>	
				
				<view>
					<uni-popup ref="popup" type="dialog">
						<uni-popup-dialog type="warning" cancelText="关闭" confirmText="确认" title="确认" 
						content="是否确认修改头像!" @confirm="confirmPic" @close="cancelPic"></uni-popup-dialog>
					</uni-popup>
					<uni-popup ref="inputName" type="dialog">
						<uni-popup-dialog ref="inputClose"  mode="input" title="修改名称"
									placeholder="请输入新的名称!" @confirm="nameConfirm"></uni-popup-dialog>
					</uni-popup>
					<uni-popup ref="inputEmail" type="dialog">
						<uni-popup-dialog ref="inputClose"  mode="input" title="修改邮箱"
									placeholder="请输入新的邮箱!" @confirm="emailConfirm"></uni-popup-dialog>
					</uni-popup>
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog type="error" cancelText="关闭" confirmText="确认" title="错误" :content="messageText"></uni-popup-dialog>
					</uni-popup>
					<uni-popup ref="backDialog" type="dialog">
						<uni-popup-dialog type="success" cancelText="关闭" confirmText="确认" title="提示" content="修改成功,请重新登录!" @confirm="back" @close="back"></uni-popup-dialog>
					</uni-popup>
				</view>
				
			</view>		
		</view>
</template>

<script>
	export default {
		data() {
			return {
				apiUrl:"http://localhost:8080/",
				uid:0,
				pic:"",
				newpic:"",
				name:"",
				email:"",
				messageText:""
			}
		},
		onLoad:function(option){
			console.log(option.uid);
			this.uid=option.uid;
			this.getUser();
		},
		methods: {
			back(){
				uni.clearStorageSync();
				uni.reLaunch({
					url:"/pages/login/login"
				})
			},
			getUser(){
				uni.request({
					url:this.apiUrl+"user/"+this.uid,
					method:'GET',
					header:{
							Authorization : uni.getStorageSync("token")
						},
					success:(res)=> {
						console.log(res.data);
						console.log(this.uid);
						let user = res.data;
						this.pic = user.picture;
						this.name = user.name;
						this.email = user.email;
					},
					fail: (err) => {
									return uni.showToast({
										icon: 'loading',
										title:'请求失败'
									})
									reject(err)
								}
				})
			},
			choosepic(){
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album'], //从相册选择
					success:(res)=> {
						this.newpic = res.tempFilePaths[0];
						console.log(this.newpic);
						this.$refs.popup.open();
					}
				})
			},
			confirmPic(){
				uni.uploadFile({
					url: 'http://127.0.0.1:8080/user/setpic/' + this.uid, //仅为示例，非真实的接口地址
					header:{
							Authorization : uni.getStorageSync("token")
						},
					filePath: this.newpic,
					name: 'pic',
					// formData:{
					// 	'id': this.uid
					// },
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
						this.pic=uploadFileRes.data;
						console.log(this.pic);
						this.newpic="";
					}
				});
				
			},
			cancelPic(){
				this.newpic="";
			}
			,
			changeName(){
				this.$refs.inputName.open();
			},
			nameConfirm(val){
				console.log(val);
				uni.request({
						method:'PUT',
						url:this.apiUrl+"user/name/"+this.uid,
						header:{
							'Content-Type':'application/x-www-form-urlencoded',
							Authorization : uni.getStorageSync("token")
							},
						data:{
							'name':val
						},
						success: (res) => {
							console.log(res.data);
							if(res.data.message!=null){
								this.messageText = res.data.message;
								this.$refs.alertDialog.open()
							}
							else{
								this.$refs.backDialog.open()
							}
						},
						fail: (err) => {
										return uni.showToast({
											icon: 'loading',
											title:'请求失败'
										})
										reject(err)
									}
					});
			},
			changeEmail(){
				this.$refs.inputEmail.open();
			},
			emailConfirm(val){
				console.log(val);
				uni.request({
						method:'PUT',
						url:this.apiUrl+"user/email/"+this.uid,
						header:{
							'Content-Type':'application/x-www-form-urlencoded',
							Authorization : uni.getStorageSync("token")
							},
						data:{
							'email':val
						},
						success: (res) => {
							console.log(res.data);
							if(res.data.message!=null){
								this.messageText = res.data.message;
								this.$refs.alertDialog.open()
							}
							else{
								this.email=val;
							}
						},
						fail: (err) => {
										return uni.showToast({
											icon: 'loading',
											title:'请求失败'
										})
										reject(err)
									}
					});
			},
			updateUser(){
				console.log(uni.getStorageSync('token'));
				uni.request({
						method:'PUT',
						url:this.apiUrl+"user/"+this.uid,
						header:{
								Authorization : uni.getStorageSync("token")
							},
						data:{
							'uid':this.uid,
							'name':this.name,
							'email':this.email,
							'picture':this.pic,
							'role':'admin'
						},
						success: (res) => {
							console.log(res.data);
							if(res.data.message!=null){
								this.messageText = res.data.message;
								this.$refs.alertDialog.open()
							}
							this.getUser();
						},
						fail: (err) => {
										return uni.showToast({
											icon: 'loading',
											title:'请求失败'
										})
										reject(err)
									}
					});
			},
			changePassword(){
				uni.navigateTo({
					url:"/pages/admin/changePassword"+"?name="+this.name
				})
			}
		}
	}
</script>

<style>
		.container {
			padding: 20px;
			font-size: 14px;
			line-height: 24px;
		}
		.slot-image{
			border-radius: 51px;
			width: 40px;
			height: 40px;
		}
</style>
